<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {mineStuListApi} from "@/api/school.js";
import useUserStore from "@/store/modules/user.js";

const {proxy} = getCurrentInstance();
const userStore = useUserStore()
const router = useRouter()

const state = reactive({
  searchForm: {
    stuName: '',
    stuNum: '',
    stuFaculties: '',
    stuPhone: '',
    yearEnrollment: '',
    stuClass: ''
  },
  queryParams: {
    pageNum: 1,
    pageSize:10,
  },
  total: 0,
  tableData: [],
})

const showDia1 = ref(false)

const handleAdd = () => {
  showDia1.value = true
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (index) => {
  router.push('noticeEdit')
}

const handleBind = () => {
  showDia1.value = true
}

const getDataList = async () => {
  const res = await mineStuListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("searchForm");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

const handleExport = () => {

  proxy.download("school/student/export", {
    ...state.queryParams
  },`${userStore.name}的学生.xlsx`);
}

onMounted(() => {
  getDataList()
})

</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="state.queryParams" ref="searchForm" label-width="auto" inline="true">
          <el-form-item label="姓名">
            <el-input v-model="state.queryParams.stuName"/>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="state.queryParams.stuNum"/>
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="state.queryParams.stuFaculties"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="state.queryParams.stuPhone"/>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="state.queryParams.yearEnrollment"/>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="state.queryParams.stuClass"/>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="审批管理">
      <template #btn-cont>
        <el-button type="primary" @click="handleExport">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center" />
          <el-table-column prop="stuClass"  label="班级" align="center"/>
          <el-table-column prop="stuNum"  label="学号" align="center"/>
          <el-table-column prop="stuGradYear"  label="毕业年份" align="center"/>
          <el-table-column prop="stuPhone" label="联系电话" align="center"/>
          <el-table-column prop="stuPlace"  label="户籍地" align="center"/>
<!--          <el-table-column width="" label="学习档案" align="center">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/learningFiles')">-->
<!--                查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="h" label="实战展示" align="center">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/practicalResults')">-->
<!--                查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="h" label="见习/实习经历" align="center" width="120">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/InternshipExperience')">-->
<!--                查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="h" label="6211" align="center">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/sixTwoOneOne')">查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="h" label="证书展示" align="center">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/certificateDisplay')">-->
<!--                查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="h" label="智育成绩" align="center">-->
<!--            <template #default="scope">-->
<!--              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/ieAchievement')">-->
<!--                查看详情-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"/>
        </div>
      </template>
    </CardBox>

    <el-dialog title="绑定班级" v-model="showDia1" width="400" :center="true">
      <div>
        <el-form label-width="80px">
          <el-form-item label="学院">
            <el-input v-model="editForm.a"/>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="editForm.a"/>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="editForm.a"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showDia1 = false">取 消</el-button>
        <el-button type="primary" @click="showDia1 = false">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
